﻿@using Covenant.Models.Grunts
@model GruntTask
@{
    Layout = "_GruntTaskLayout";
    ViewData["Title"] = "GruntTasks";
    IEnumerable<ReferenceSourceLibrary> ReferenceSourceLibraries = ViewBag.ReferenceSourceLibraries;
    IEnumerable<ReferenceAssembly> ReferenceAssemblies = ViewBag.ReferenceAssemblies;
    IEnumerable<EmbeddedResource> EmbeddedResources = ViewBag.EmbeddedResources;
    IEnumerable<SelectListItem> librarySelectList = ReferenceSourceLibraries.Select(RSL =>
    {
        return new SelectListItem { Text = RSL.Name, Value = RSL.Id.ToString(), Selected = Model.ReferenceSourceLibraries.Select(MRSL => MRSL.Id).Contains(RSL.Id) };
    });
    IEnumerable<SelectListItem> assemblySelectList = ReferenceAssemblies.Select(RA =>
    {
        return new SelectListItem { Text = RA.Name, Value = RA.Id.ToString(), Selected = Model.ReferenceAssemblies.Select(MRA => MRA.Id).Contains(RA.Id) };
    });
    IEnumerable<SelectListItem> resourceSelectList = EmbeddedResources.Select(ER =>
    {
        return new SelectListItem { Text = ER.Name, Value = ER.Id.ToString(), Selected = Model.EmbeddedResources.Select(MER => MER.Id).Contains(ER.Id) };
    });
}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap pb-2 mb-3">
    <h1 class="h2">GruntTask: <span id="task-name" class="text-primary">@Html.DisplayFor(model => model.Name)</span></h1>
</div>

<form id="edit-task-form" asp-action="Edit">
    <div asp-validation-summary="All"></div>
    <input asp-for="Id" value="@Model.Id" type="hidden">
    <div class="form-row">
        <div class="form-group col-sm-4">
            <label asp-for="Name"></label>
            <input asp-for="Name" value="@Model.Name" class="form-control">
        </div>
        <div class="form-group col-sm-8">
            <label asp-for="Description"></label>
            <input asp-for="Description" value="@Model.Description" class="form-control">
        </div>
    </div>
    <div class="form-check form-check-inline">
        @if (Model.TokenTask)
        {
            <input id="TokenTask" name="TokenTask" checked class="form-check-input" type="checkbox">
        }
        else
        {
            <input id="TokenTask" name="TokenTask" class="form-check-input" type="checkbox">
        }
        <label id="TokenTask" name="TokenTask" class="form-check-label">TokenTask</label>
    </div>
    <div class="form-check form-check-inline">
        @if (Model.UnsafeCompile)
        {
            <input id="UnsafeCompile" name="UnsafeCompile" checked class="form-check-input" type="checkbox">
        }
        else
        {
            <input id="UnsafeCompile" name="UnsafeCompile" class="form-check-input" type="checkbox">
        }
        <label id="UnsafeCompile" name="UnsafeCompile" class="form-check-label">UnsafeCompile</label>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label asp-for="ReferenceSourceLibraries"></label><br />
            <select asp-for="ReferenceSourceLibraries" class="selectpicker show-menu-arrow" multiple data-dropup-auto="false" data-width="auto" data-live-search="true" data-selected-text-format="count > 2">
                @foreach (var library in librarySelectList)
                {
                    if (library.Selected)
                    {
                        <option selected value="@library.Value">@library.Text</option>
                    }
                    else
                    {
                        <option value="@library.Value">@library.Text</option>
                    }
                }
            </select>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label asp-for="ReferenceAssemblies"></label><br />
            <select asp-for="ReferenceAssemblies" class="selectpicker show-menu-arrow" multiple data-dropup-auto="false" data-width="auto" data-live-search="true" data-selected-text-format="count > 2">
                @foreach (var assembly in assemblySelectList)
                {
                    if (assembly.Selected)
                    {
                        <option selected value="@assembly.Value">@assembly.Text</option>
                    }
                    else
                    {
                        <option value="@assembly.Value">@assembly.Text</option>
                    }
                }
            </select>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label asp-for="EmbeddedResources"></label><br />
            <select asp-for="EmbeddedResources" class="selectpicker show-menu-arrow" multiple data-dropup-auto="false" data-width="auto" data-live-search="true" data-selected-text-format="count > 2">
                @foreach (var resource in resourceSelectList)
                {
                    if (resource.Selected)
                    {
                        <option selected value="@resource.Value">@resource.Text</option>
                    }
                    else
                    {
                        <option value="@resource.Value">@resource.Text</option>
                    }
                }
            </select>
        </div>
    </div>

    <h5>Options</h5>
    @for (int i = 0; i < Model.Options.Count; i++)
    {
        <div class="form-row option-row mt-2">
            <input asp-for="Options[i].Id" value="@Model.Options[i].Id" class="form-control" type="hidden" readonly>
            <input asp-for="Options[i].GruntTaskId" value="@Model.Id" class="form-control" type="hidden" readonly>
            <input asp-for="Options[i].Value" value="@Model.Options[i].Value" class="form-control" type="hidden">
            <div class="d-flex flex-row">
                <div class="col-auto">
                    <div class="row">
                        <div class="form-group col-auto">
                            <label asp-for="Options[i].Name"><b>@i</b>. Name</label>
                            <input asp-for="Options[i].Name" value="@Model.Options[i].Name" class="form-control">
                        </div>
                        <div class="form-check form-check-inline mt-2">
                            @{
                                var id = "Options_" + i + "__Optional";
                                var name = "Options[" + i + "].Optional";
                            }
                            @if (Model.Options[i].Optional)
                            {
                                <input id="@id" name="@name" checked class="form-check-input" type="checkbox">
                            }
                            else
                            {
                                <input id="@id" name="@name" class="form-check-input" type="checkbox">
                            }
                            <label for="@id" class="form-check-label">Optional</label>
                        </div>
                    </div>
                    <div class="row form-group col-auto">
                        <label asp-for="Options[i].Description"></label>
                        <input asp-for="Options[i].Description" value="@Model.Options[i].Description" class="form-control">
                    </div>
                </div>
                <div class="col-auto align-self-center">
                    <button type="button" class="btn btn-outline-danger btn-sm xbutton remove-option-button">
                        <span data-feather="x"></span>
                    </button>
                </div>
            </div>
        </div>
    }
    <button type="button" id="add-option-button" class="btn btn-outline-primary btn-sm mb-4"><span data-feather="plus"></span> Add</button>
    <div class="form-group">
        <label asp-for="Help"></label>
        <textarea asp-for="Help" value="@Model.Help" rows="10" class="form-control"></textarea>
    </div>
    <div class="form-group">
        <label asp-for="Code"></label>
        <textarea asp-for="Code" value="@Model.Code" rows="20" class="form-control"></textarea>
    </div>
    <button id="edit-task-submit" type="button" class="btn btn-primary"><span data-feather="edit"></span> Edit</button>
</form>

@section Scripts {
<script type="text/javascript">
    $(document).ready(function () {
        var editor = CodeMirror.fromTextArea(document.getElementById("Code"), {
            lineNumbers: true,
            mode: "text/x-csharp"
        });

        $("#edit-task-submit").click(function () {
            $(".form-check-input").each(function () {
                if ($(this).is(":checked")) {
                    $(this).val("True");
                }
                else {
                    $(this).prop("checked", true);
                    $(this).val("False");
                }
            });
            $("#edit-task-form").submit();
        });

        var addOption = function () {
            var num = $(".option-row").length;
            var modelId = $("form > input#Id").val();
            var newitem = '<div class="form-row option-row mt-2">' +
                          '    <input id="Options_' + num + '__Id" name="Options[' + num + '].Id" value="0" class="form-control" type="hidden" readonly>' +
                          '    <input id="Options_' + num + '__GruntTaskId" name="Options[' + num + '].GruntTaskId" value="' + modelId + '" class="form-control" type="hidden" readonly>' +
                          '    <input id="Options_' + num + '__Value" name="Options[' + num + '].Value" class="form-control" type="hidden">' +
                          '    <div class="d-flex flex-row">' +
                          '        <div class="col-auto">' +
                          '            <div class="row">' +
                          '                <div class="form-group col-auto">' +
                          '                    <label for="Options_' + num + '__Name"><b>' + num + '</b>. Name</label>' +
                          '                    <input id="Options_' + num + '__Name" name="Options[' + num + '].Name" class="form-control">' +
                          '                </div>' +
                          '                <div class="form-check form-check-inline mt-2">' +
                          '                    <input id="Options_' + num + '__Optional" name="Options[' + num + '].Optional" value="False" data-val="true" class="form-check-input" type="checkbox">' +
                          '                    <label for="Options_' + num + '__Optional" class="form-check-label">Optional</label>' +
                          '                </div>' +
                          '            </div>' +
                          '            <div class="row form-group col-auto">' +
                          '                <label for="Options_' + num + '__Description">Description</label>' +
                          '                <input id="Options_' + num + '__Description" name="Options[' + num + '].Description" class="form-control">' +
                          '            </div>' +
                          '        </div>' +
                          '        <div class="col-auto align-self-center">' +
                          '            <button type="button" class="btn btn-outline-danger btn-sm xbutton remove-option-button"><span data-feather="x"></span></button>' +
                          '        </div>' +
                          '    </div>' +
                          '</div>';
            $(this).before(newitem);
            feather.replace();
            $(this).prev().find("button").click(removeOption);
        }

        var removeOption = function () {
            var row = $(this).parent().parent();
            var num = row.find("input").attr("id").replace("Options_", "").replace("__Id", "");
            $(".option-row").each(function () {
                var currNum = $(this).find("input").attr("id").replace("Options_", "").replace("__Id", "");
                if (parseInt(currNum) > parseInt(num)) {
                    $(this).find("input").each(function () {
                        var currIdAttr = $(this).attr("id");
                        var currNameAttr = $(this).attr("name");
                        $(this).attr("id", currIdAttr.replace(currNum, parseInt(currNum) - 1));
                        $(this).attr("name", currNameAttr.replace(currNum, parseInt(currNum) - 1));
                    });
                    $(this).find("label").each(function () {
                        var currForAttr = $(this).attr("for");
                        $(this).attr("for", currForAttr.replace(currNum, parseInt(currNum) - 1));
                    });
                    $(this).find("b").each(function () {
                        console.log($(this).text());
                        $(this).text(parseInt($(this).text()) - 1);
                    });
                }
            });
            row.remove();
        }

        $('#add-option-button').click(addOption);
        $('.remove-option-button').click(removeOption);
    });
</script>
}